<template>
  <view>
    <view class="content">
      <text class="welcome">Dm小店 <span></span></text><br />
      <text class="desc">专注虚拟商品，极速交付，安全保障</text>
    </view>

    <!-- 顶部轮播图 -->
	<view class="page">
    <view class="swiper-wrapper">
      <swiper
        autoplay
        circular
        indicator-dots
        class="banner"
        indicator-color="#ddd"
        indicator-active-color="#007aff"
      >
        <swiper-item v-for="(img, index) in bannerList" :key="index">
          <image :src="img" mode="aspectFill" class="banner-img" />
        </swiper-item>
      </swiper>
    </view>
    </view>
    <!-- 动态内容 -->
     <view>
   
       <!-- 分类下拉选择器 -->
       <!-- 分类下拉选择器 -->
           <picker
             :value="selectedIndex"
             :range="classfyList"
             @change="onClassfyChange"
             style="display: block; width: 100%;"
           >
             <view class="picker-box">
               <view class="picker-label">分类：</view>
               <view class="picker-value">{{ selectedClassfy || '请选择分类' }}</view>
               <text class="picker-arrow">⌄</text>
             </view>
           </picker>

   
       <!-- 展示选中的分类数据 -->
       <view
         v-for="item in filteredItems"
         :key="item.id"
         class="page"
       >
         <view class="discount-card">
           <text class="discount-title">{{ item.classfy }}</text>
         </view>
   
         <!-- 图片按钮区 -->
         <view class="button-container">
           <navigator
             v-for="(url, index) in item.url.split(',')"
             :key="index"
             :url="url"
             class="button-item"
           >
             <image
               class="btn-img"
               :src="item.link.split(',')[index]"
               :alt="item.descript.split(',')[index]"
             />
           </navigator>
         </view>
       </view>

<br />


    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 顶部轮播图
      bannerList: [
		  'https://dmitai.vip/post/1.png',
        'https://dmitai.vip/post/2.jpg'
      ],
      items: [],           // 所有数据
      classfyList: [],     // 所有分类（去重）
      selectedClassfy: '', // 当前选中的分类
      selectedIndex: 0     // picker 选中的索引
    };
  },
  computed: {
    // 根据当前选中的分类进行筛选
    filteredItems() {
      return this.items.filter(item => item.classfy === this.selectedClassfy);
    }
  },
  methods: {
    fetchData() {
      uni.request({
        url: 'https://store.dmitai.vip/api/db.php', // 替换为你的 PHP 文件 URL
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200) {
            this.items = res.data;

            // 获取所有分类并去重
            const classfys = res.data.map(item => item.classfy);
            this.classfyList = [...new Set(classfys)];

            // 默认选择 id = 1 的分类
            const defaultItem = res.data.find(item => item.id === '1' || item.id === 1);
            if (defaultItem) {
              this.selectedClassfy = defaultItem.classfy;
              this.selectedIndex = this.classfyList.indexOf(defaultItem.classfy);
            } else {
              this.selectedClassfy = this.classfyList[0] || '';
              this.selectedIndex = 0;
            }
          } else {
            console.log('获取数据失败');
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
        }
      });
    },
    onClassfyChange(e) {
      this.selectedIndex = e.detail.value;
      this.selectedClassfy = this.classfyList[this.selectedIndex];
    }
  },
  mounted() {
    this.fetchData();
  }
};

</script>



<style scoped>
/* 全局基础设置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  
  background-color: #ffffff;
}

/* 页面容器 */


/* 轮播图 */
.swiper-wrapper {
  padding: 0;
  margin-top: 30rpx;
}

.banner {
  height: 200px;
  
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.banner:hover {
  box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.18);
  transform: scale(1.02);
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20rpx;
}

/* 欢迎语和描述 */
.content {
  padding: 40rpx 0;
  text-align: center;
  color: #4a4a4a;
}

.welcome {
  font-size: 3vw; /* 动态调整字体大小 */
  font-weight: 700;
  letter-spacing: 1px;
  color: #333;
}

.desc {
  margin-top: 6rpx;
  font-size: 3vw; /* 动态调整字体大小 */
  color: #777;
}

.desc::before {
  content: "🛒 ";
}

/* 容器 - 添加玻璃拟态效果 */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24rpx;
  margin-top: 40rpx;
  padding: 32rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-radius: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 122, 255, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

/* 图片卡片容器 - 添加3D透视效果 */
.button-item {
  width: 48%;
  perspective: 1000rpx;
  transform-style: preserve-3d;
  
  border-radius: 30rpx;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button-item:hover {
  transform: translateY(-8rpx) rotateX(2deg) rotateY(1deg);
}

/* 图片按钮 - 添加渐变光效 */
.btn-img {
  width: 100%;
  height: 240rpx;
  border-radius: 24rpx;
  object-fit: cover;
  cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4rpx 12rpx rgba(0, 122, 255, 0.12),
    inset 0 0 0 1rpx rgba(255, 255, 255, 0.2);
}

.btn-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24rpx;
  background: linear-gradient(120deg, 
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0) 60%);
}

.btn-img:hover {
  transform: scale(1.03) rotateZ(0.5deg);
  box-shadow: 
    0 12rpx 32rpx rgba(0, 122, 255, 0.2),
    inset 0 0 0 1rpx rgba(255, 255, 255, 0.3);
}

/* 购买按钮 - 霓虹光效升级 */
.btn-purchase {
  padding: 16rpx 32rpx;
  background: linear-gradient(135deg, #007aff 0%, #0051ff 100%);
  color: white;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 24rpx;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.btn-purchase::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0) 65%);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.btn-purchase:hover {
  transform: scale(1.05);
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
}

/* 福利按钮 - 水晶质感升级 */
.btn-discount {
  padding: 18rpx 36rpx;
  background: rgba(244, 244, 247, 0.9);
  color: #007aff;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: 2rpx solid rgba(0, 122, 255, 0.15);
  cursor: pointer;
  margin-bottom: 16rpx;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(8rpx);
  box-shadow: 
    0 4rpx 12rpx rgba(0, 122, 255, 0.08),
    inset 0 0 0 1rpx rgba(255,255,255,0.6);
}

.btn-discount:hover {
  background: linear-gradient(135deg, #007aff 0%, #00a8ff 100%);
  color: white;
  transform: translateY(-2rpx);
  box-shadow: 
    0 8rpx 24rpx rgba(0, 122, 255, 0.2),
    inset 0 0 0 1rpx rgba(255,255,255,0.3);
}

/* 响应式微交互 */
.button-item:active,
.btn-purchase:active,
.btn-discount:active {
  transform: scale(0.98);
  transition: all 0.1s ease;
}

/* 颜色增强 */
.btn-discount:hover {
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
/* 自适应布局 */
.page, .content, .button-container {
  margin: 0 auto;
  max-width: 960rpx;
  width: 100%;
}



@media (max-width: 480px) {
  .welcome {
    font-size: 10vw; /* 极小屏幕字体更大 */
  }

  .desc {
    font-size: 6vw;
  }

  .btn-img {
    height: 160rpx;
  }

  .btn-purchase {
    font-size: 22rpx;
    padding: 8rpx 20rpx;
  }

  .btn-discount {
    font-size: 24rpx;
    padding: 10rpx 20rpx;
  }
}


/*折扣区*/

.discount-card {
  width: 92%;
  margin: 40rpx auto;
  padding: 30rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 
    8rpx 8rpx 20rpx rgba(255, 135, 0, 0.25),
    -4rpx -4rpx 10rpx rgba(255, 255, 255, 0.6);
  border: 2rpx solid #ffd2a6;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.discount-card:hover {
  transform: translateY(-6rpx);
  box-shadow: 
    12rpx 12rpx 30rpx rgba(255, 98, 0, 0.3),
    -6rpx -6rpx 14rpx rgba(255, 255, 255, 0.6);
}

.discount-title {
  font-size: 40rpx;
  font-weight: 800;
  color: #ff6a00;
  letter-spacing: 4rpx;
  text-shadow: 2rpx 2rpx 6rpx rgba(255, 145, 0, 0.3);
}



/*拉下*/
.picker-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  margin: 32rpx auto;
  width: 80%;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f0f0f0;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  position: relative;
}

.picker-label {
  color: #888;
  font-size: 28rpx;
  flex-shrink: 0;
}

.picker-value {
  flex-grow: 1;
  text-align: right;
  color: #007aff;
  font-size: 30rpx;
  font-weight: 600;
  padding-right: 20rpx;
}

.picker-arrow {
  font-size: 28rpx;
  color: #aaa;
}
</style>
